前言

在網頁開發的過程中，可能會需要使用到選取器來選取元素中是否有包含某個類別來進行樣式的套用，例如，網頁導覽列中，當頁面切換至該導覽分頁時，路由或套件可能會在導覽列的元素類別上添加 active 的類別名稱，我們就可以透過選取器來套用樣式，並僅作用在元素類別有包含這個 active 的名稱，透過 Master CSS 不僅可以做到這種效果，也更支援其他豐富的選擇器來選取元素。

類別選擇器（Class selector）

當要套用樣式到元素中具有特定類別名稱，你可以透過在類別標記尾端，添加選擇器 .class 來配置，格式為一個點 . 再加上類別名稱。

例如，你可使用 bb:gold-80.active 來進行選擇器樣式的套用，其中尾端的 .active，表示在元素的類別存在 active 類別時，套用 bb:gold-80 樣式，來變更元素底部邊框顏色 。

<div class="flex row">
  <a class="p:12|24 fg:gray-10 bb:3|solid|gray-90 bb:gold-80.active">首頁</a>
  <a class="p:12|24 fg:gray-10 bb:3|solid|gray-90 bb:gold-80.active active">設計</a>
  <a class="p:12|24 fg:gray-10 bb:3|solid|gray-90 bb:gold-80.active">關於</a>
</div>

看起來就會像這樣

產生的 CSS，僅列出與底部邊框相關的規則

.bb\:3\|solid\|gray-90 {
  border-bottom: 0.1875rem solid rgb(236, 235, 238);
}

.bb\:gold-80\.active.active {
  border-bottom-color: rgb(251, 214, 127);
}

ID 選擇器（ID selector）

與類別選擇器同樣的概念，只是使用選擇器的語法為使用井字號 # 再加上 ID 名稱，就可以在元素具有特定 ID 名稱時套用樣式。

例如，你可使用 font:semibold#design 來進行選擇器樣式的套用，其中尾端的 #design，表示在元素的 ID 名稱為 design ，套用 fg:gold-76 樣式，來設定元素的文字顏色。

<div class="flex row">
  <a id="home" class="p:12|24 fg:gray-10 fg:gold-76#design">首頁</a>
  <a id="design" class="p:12|24 fg:gray-10 fg:gold-76#design">設計</a>
  <a id="about" class="p:12|24 fg:gray-10 fg:gold-76#design">關於</a>
</div>

看起來就會像這樣

產生的 CSS，僅列出選擇器相關的規則

.fg\:gold-76\#design#design {
  color: rgb(239, 192, 76);
}

屬性選擇器（Attribute selector）

當然，如果你熟悉 CSS 的選擇器，肯定有想到屬性選擇器，你可以透過在類別標記尾端，添加選擇器 [attribute] 來配置，中括號 [] 內填寫要匹配的屬性名稱，就可以在元素具有特定屬性時套用樣式。

例如，你可使用 opacity:.5[disabled] 與 cursor:not-allowed[disabled] 來進行選擇器樣式的套用，其中尾端的 [disabled]，表示在元素的存在 disabled 屬性時，套用 opacity:.5 與 cursor:not-allowed 樣式，來變更元素為半透明及滑鼠指標為禁止使用的樣式。

<button class="opacity:.5[disabled] cursor:not-allowed[disabled]" disabled>不能點哦！</button>

看起來就會像這樣

產生的 CSS，僅列出與底部邊框相關的規則

.opacity\:\.5\[disabled\][disabled] {
  opacity: 0.5;
}

.cursor\:not-allowed\[disabled\][disabled] {
  cursor: not-allowed;
}

其他可以使用屬性的選擇器如下，與原生 CSS 相同：

後代組合選擇器（Descendant Combinator）

你可以透過添加組合選擇器 _ 來配置選擇元素的所有後代。

例如，使用 fg:gold-76_a，_a 表示選取元素所有後代的 a 標籤來套用樣式。

<div class="flex row fg:gold-76_a">
  <div class="p:12|24 fg:gray-10">
    <a>Master CSS</a>
  </div>
  <a class="p:12|24 fg:gray-10">首頁</a>
  <a class="p:12|24 fg:gray-10">設計</a>
  <a class="p:12|24 fg:gray-10">關於</a>
</div>

看起來就會像這樣

產生的 CSS，僅列出與組合選擇器相關的規則

.fg\:gold-76_a a {
  color: rgb(239, 192, 76);
}

子代元素組合選擇器（Child Combinator）

你可以透過添加組合選擇器 > 來配置選擇元素的第一個子節點。

例如，使用 fg:gold-76>a，>a 表示選取元素第一層節點為 a 標籤來套用樣式，而 Master CSS 文字雖然是 a 標籤，但並不是在 fg:gold-76>a 類別所標示的元素第一層子節點，所以不會套用文字顏色。

<div class="flex row fg:gold-76>a">
  <div class="p:12|24 fg:gray-10">
    <a>Master CSS</a>
  </div>
  <a class="p:12|24 fg:gray-10">首頁</a>
  <a class="p:12|24 fg:gray-10">設計</a>
  <a class="p:12|24 fg:gray-10">關於</a>
</div>

看起來就會像這樣

產生的 CSS，僅列出與組合選擇器相關的規則

.fg\:gold-76\>a > a {
  color: rgb(239, 192, 76);
}

全體兄弟組合選擇器（General Sibling Combinator）

你可以透過添加組合選擇器 ~ 來配置選擇元素的相同層級的元素。

例如，在「首頁」元素類別中使用 fg:gold-76~a，~a 表示選取相同層級的所有 a 標籤來套用樣式。

<div class="flex row">
  <div class="p:12|24 fg:gray-10">
    <a>Master CSS</a>
  </div>
  <a class="p:12|24 fg:gray-10 fg:gold-76~a">首頁</a>
  <a class="p:12|24 fg:gray-10">設計</a>
  <a class="p:12|24 fg:gray-10">關於</a>
</div>

看起來就會像這樣

產生的 CSS，僅列出與組合選擇器相關的規則

.fg\:gold-76\~a ~ a {
  color: rgb(239, 192, 76);
}

鄰近兄弟組合選擇器（Adjacent Sibling Combinator）

你可以透過添加組合選擇器 + 來配置選擇相鄰的元素。

例如，在「首頁」元素類別中使用 fg:gold-76+a，+a 表示選取這個元素相鄰的 a 標籤來套用樣式。

<div class="flex row">
  <div class="p:12|24 fg:gray-10">
    <a>Master CSS</a>
  </div>
  <a class="p:12|24 fg:gray-10 fg:gold-76+a">首頁</a>
  <a class="p:12|24 fg:gray-10">設計</a>
  <a class="p:12|24 fg:gray-10">關於</a>
</div>

看起來就會像這樣

產生的 CSS，僅列出與組合選擇器相關的規則

.fg\:gold-76\+a + a {
  color: rgb(239, 192, 76);
}

通用選擇器（Universal selector）

你可以透過星字符號 * 來表示符合任何類型的元素，類似萬用符號的概念。

例如，我們的文字是使用各種不同的標籤來呈現，可以使用 * 來一次性選取所有元素並設定內距與文字顏色。

<div class="flex row p:12|24_* fg:gold-76_*">
  <a>首頁</a>
  <span>設計</span>
  <label>關於</label>
</div>

看起來就會像這樣

產生的 CSS，僅列出與通用選擇器相關的規則

.fg\:gold-76_\* * {
  color: rgb(239, 192, 76);
}

.p\:12\|24_\* * {
  padding: 0.75rem 1.5rem;
}